<template>
	<view class="detail">
		<view class="d1">
			<image :src="'http://124.93.196.45:10001'+detail.imgUrl"></image>
			<view class="d2">
				<text>{{detail.name}}</text>
				<text>人均消费：{{detail.avgCost}}元</text>
				<view class="d3">
					<text>评分：{{detail.score}}</text>
					<u-icon name="star" size="30" style="margin-left: 60px;" v-show="show1" @click="addcollect"></u-icon>
					<u-icon name="star-fill" size="30" style="margin-left: 60px;" v-show="show2" @click="deletecollect"></u-icon>
				</view>
				<text>月销量：{{detail.saleQuantity}}单</text>
			</view>
		</view>
		<u-tabs :list="li" :scrollable="false" @click="clicktab"></u-tabs>
		<view class="cai" v-show="key1">
			<scroll-view scroll-y class="left">
				<view class="c1" v-for="item in type" @click="getlist(item.id)">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="right">
				<view class="c2" v-for="item in list">
					<image :src="'http://124.93.196.45:10001'+item.imgUrl"></image>
					<view class="c3">
						<text>{{item.name}}</text>
						<text>月销量：{{item.saleQuantity}}</text>
						<view class="c4">
							<text>价格：{{item.price}}</text>
							<view class="c5">
							<u-icon name="minus" style="margin-right: 10px;" size="13" v-if="item.count>0" @click="subtract(item)"></u-icon>
							<text>{{item.count}}</text>
							<u-icon name="plus" style="margin-left: 10px;" size="13" @click="addcount(item)"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="s2">
				<view class="shopcar">
					<u-icon name="shopping-cart" size="80"></u-icon>
					<view class="s1">
						<text style="font-size: 18px;">数量：{{total}}</text>
						<text style="font-size: 25px; color: red;">￥{{sum}}</text>
					</view>
					<u-button type="error" text="去结算" style="width: 80px; height: 30px;
					 margin-top: 20px; position: absolute; margin-left: 275px;" @click="topay"></u-button>
				</view>
			</view>
		</view>
		<view class="pingjia" v-show="key2">
			<text style="font-size: 30px; color: firebrick;">综合评价:</text>
			<u-rate value="5" size="30" style="margin-top: 10px; margin-bottom: 10px;" :readonly="true"></u-rate>
			<text style="font-size: 30px; color: firebrick;">客户评价：</text>
			<view class="p1" v-for="item in comentlist">
				<view class="p2">
					<u-avatar :src="'http://124.93.196.45:10001'+item.avatar"></u-avatar>
					<u-rate :value="item.score" :readonly="true"></u-rate>
				</view>
				<view class="p3">
					{{item.nickName}}
					<text>评论内容：{{item.content}}</text>
					<text>商家回复：{{item.replyContent}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				detail:{},
				show1:true,
				show2:false,
				collectid:'',
				type:[],
				list:[],
				typeid:'',
				total:0,
				sum:0,
				li:[
					{
						name:'点菜'
					},
					{
						name:'评价'
					},
					{
						name:'商家介绍'
					}
				],
				key1:true,
				key2:false,
				key3:false,
				comentlist:[]
			}
		},
		onLoad(options) {
			this.id=options.id
			this.getdetail()
			this.judgecollect()
			this.gettype()
			
		},
		methods: {
			getdetail(){
				this.api.get('/prod-api/api/takeout/seller/'+this.id).then(res=>{
					this.detail=res.data.data
				})
			},
			addcollect(){
				this.show1=!this.show1
				this.show2=!this.show2
				const data={
					sellerId:this.id
				}
				this.api.get('/prod-api/api/takeout/collect','POST',data).then(res=>{
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'收藏成功'
							})
						},700)
						this.judgecollect()
					}else{
						setTimeout(function(){
							uni.showToast({
								title:'收藏失败',
								icon:'error'
							})
						},700)
					}
				})
			},
			judgecollect(){
				this.api.get('/prod-api/api/takeout/collect/check?sellerId='+this.id).then(res=>{
					if(res.data.isCollect){
						this.show2=true
						this.show1=false
						this.collectid=res.data.id
					}
					console.log(this.collectid)
				})
			},
			deletecollect(){
				this.api.get('/prod-api/api/takeout/collect/'+this.collectid,'DELETE').then(res=>{
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'取消成功'
							})
						},700)
						this.show1=true
						this.show2=false
					}
				})
			},
			gettype(){
				this.api.get('/prod-api/api/takeout/category/list?sellerId='+this.id).then(res=>{
					this.type=res.data.data
					this.typeid=this.type[0].id
					this.getlist2()
				})
			},
			getlist(typeid){
				this.api.get('/prod-api/api/takeout/product/list?sellerId='+this.id+'&categoryId='+typeid).then(res=>{
					this.list=res.data.data.map(item=>{
						return{
							...item,
							count:0
						}
					})
				})
			},
			getlist2(){
				this.api.get('/prod-api/api/takeout/product/list?sellerId='+this.id+'&categoryId='+this.typeid).then(res=>{
					this.list=res.data.data.map(item=>{
						return{
							...item,
							count:0
						}
					})
					console.log(this.list[0])
				})
			},
			addcount(item){
				item.count++
				this.total++
				this.sum = Number((this.sum + item.price).toFixed(2));
			},
			subtract(item){
				item.count--
				this.total--
				this.sum = Number((this.sum - item.price).toFixed(2));
			},
			clicktab(e){
				if(e.index===0){
					this.key1=true
					this.key2=false
					this.key3=false
				}else if(e.index===1){
					this.getcomentlist()
					this.key1=false
					this.key2=true
					this.key3=false
				}else{
					this.key1=false
					this.key2=false
					this.key3=true
				}
			},
			getcomentlist(){
				this.api.get('/prod-api/api/takeout/comment/list?sellerId='+this.id).then(res=>{
					this.comentlist=res.data.rows
				})
			},
			topay(){
				if(this.total===0){
					uni.showToast({
						title:'内容为空',
						icon:'error'
					})
					return
				}
				const data=this.list.filter(item=>item.count>0)
				uni.navigateTo({
					url:'/pages/other/takaway/payment/payment?data='+JSON.stringify(data)+'&total='+this.total+'&sum='+this.sum
				})
			}
		}
	}
</script>

<style lang="scss">
	
.cai{
	height: 100%;
	display: flex;
	.left{
		width: 150px;
		.c1{
			text-align: center;
			width: 90px;
			height: 40px;
			border: 2px solid black;
			margin-top: 20px;
		}
		.c1:hover{
			background-color: black;
			color: white;
		}
	}
	.right{
		.c2{
			margin-bottom: 50px;
			display: flex;
			image{
				width: 100px;
				height: 100px;
			}
			.c3{
				margin-left: 10px;
				line-height: 30px;
				display: flex;
				flex-direction: column;
				.c4{
					display: flex;
					flex-wrap: nowrap;
					.c5{
						display: flex;
						margin-left: 20px;
					}
				}
			}
		}
	}	
}
.d1{
	display: flex;
	border-bottom: 2px solid salmon;
	image{
		margin-left: 20px;
		width: 150px;
		height: 150px;
		border-radius: 15px;
	}
	.d2{
		margin-left: 20px;
		display: flex;
		flex-direction: column;
		line-height: 40px;
		.d3{
			display: flex;
		}
	}
}
.shopcar {
  width: 100%;
  height: 70px;
  display: flex;
  background-color: #ccc;
  position: fixed;
  bottom: 0;
  left: 0; 
  .s1 {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    line-height: 30px;
  }
}
.p1{
	border-top: 3px solid #ccc;
	.p2{
		display: flex;
		justify-content: space-between;
	}
	.p3{
		display: flex;
		flex-direction: column;
		line-height: 40px;
	}
}
</style>
